import { useState } from 'react';

import type { YmDataNode } from 'ym-design';
import { YmTree } from 'ym-design';

const DEFAULTTREEDATA: YmDataNode[] = [
  {
    key: '0',
    title: 'parent 0',
    children: [
      {
        key: '0-0',
        title: 'parent 0-0',
        children: [{ key: '0-0-0', title: 'leaf 0-0-0' }],
      },
      {
        key: '0-1',
        title: 'parent 0-1',
        children: [
          { key: '0-1-0', title: 'leaf 0-1-0' },
          { key: '0-1-1', title: 'leaf 0-1-1' },
          { key: '0-1-2', title: 'leaf 0-1-2', isLeaf: true },
          { key: '0-1-3', title: 'leaf 0-1-3' },
        ],
      },
    ],
  },
];

function SelectAble() {
  const [treeData, setTreeData] = useState<YmDataNode[]>(DEFAULTTREEDATA);

  const handleSelect = (
    selectedKeys: string[],
    selectInfo: {
      selected: boolean;
      node: YmDataNode;
      selectedNodes: YmDataNode;
      nativeEvent: MouseEvent;
    },
  ) => {
    console.log('--selectedKeys--:', selectedKeys);
  };

  return (
    <div className="tree-page">
      <YmTree
        treeData={treeData}
        defaultExpandedKeys={['0-1-1']}
        rootStyle={{ width: '400px', border: '#666 solid 1px' }}
        treeShowCheckableBox
        onSelect={handleSelect}
      />
    </div>
  );
}

export default SelectAble;
